<template>
  <div class="Recording">
    <div class="header" style="font-size: 18px">
      <div class="line"></div>
      签约记录
    </div>
    <Nav @change1="getInfo" :page="current.page" :count="current.count"></Nav>
    <el-table :data="agencyList" stripe>
      <el-table-column type="selection" align="center" />
      <el-table-column
        prop="number"
        label="编号"
        align="center"
        width="135px"
      />
      <el-table-column
        prop="rname"
        label="签约人姓名"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="IDCard"
        label="身份证号"
        align="center"
        width="165px"
      />
      <el-table-column
        prop="tel"
        label="手机号码"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="tname"
        label="签约医生团队"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="dname"
        label="签约医生"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="sname"
        label="签约服务包"
        align="center"
        width="110px"
      />
      <el-table-column prop="status" label="签约状态" align="center">
        <template #default="scope">
          <span v-if="scope.row.status == 0" style="color: #3dd4a7"
            >待审核</span
          >
          <span v-if="scope.row.status == 1" style="color: #fddb78"
            >待支付</span
          >
          <span v-if="scope.row.status == 2" style="color: #fa746b"
            >已驳回</span
          >
          <span v-if="scope.row.status == 3" style="color: #3d4cd4"
            >生效中</span
          >
          <span v-if="scope.row.status == 4" style="color: #9fd43d"
            >已过期</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="takingEffectTime"
        label="到期时间"
        align="center"
        width="155px"
      >
        <template #default="scope">
          {{
            Number(scope.row.takingEffectTime.slice(0, 4)) +
            scope.row.period +
            scope.row.takingEffectTime.slice(4)
          }}
        </template></el-table-column
      >
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="150px"
        fixed="right"
      >
        <template #default="scope">
          <el-link type="primary" @click="agencyInfo(scope.row.id)"
            >查看详情</el-link
          >
          <el-link type="primary" @click="agencyModify">续约</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="current.page"
      v-model:page-size="current.count"
      :page-sizes="[1, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="agencyTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Nav from "@/components/yzy/nav.vue";
import { ElMessage } from "element-plus";
const router = useRouter();
//获取列表
const getInfo = (arg: any) => {
  agencyList.value = arg.data;
  agencyList.value = agencyList.value.filter((item) => {
    return item.status == 3 || item.status == 4;
  });
  agencyTotal.value = arg.total;
};
//签约总数
const agencyTotal = ref(10);
//页数
const current = ref({
  page: 1,
  count: 10,
});
//分布器
const handleSizeChange = (e: number) => {
  //一页多少
  current.value.count = e;
  console.log(current.value);
};
const handleCurrentChange = (e: number) => {
  //第几页
  current.value.page = e;
};
//签约列表
const agencyList = ref([
  {
    id: "88579930-ee50-11ed-8059-0ba99686sd93",
    number: "20235121407123",
    rname: "白素",
    IDCard: "512382188902120867",
    tel: "13366668888",
    status: 3,
    tname: "段宏团队",
    dname: "段宏",
    sname: "老人服务包",
    takingEffectTime: "2023-05-17 00:00:00",
    period: 1,
  },
  {
    id: "67e98bc0-ee1b-11ed-8459-c76f227cdls2",
    number: "20235121408192",
    rname: "小青",
    IDCard: "513777188109182673",
    tel: "18899991111",
    status: 3,
    tname: "段宏团队",
    dname: "段宏",
    sname: "老人服务包",
    takingEffectTime: "2023-05-13 00:00:00",
    period: 1,
  },
]);
//查看详情
const agencyInfo = (id: any) => {
  router.push({ path: "/home/Agency/treatInfo", query: { id } });
};
//续约
const agencyModify = () => {
  // router.push({ path: "/home/Agency/treatModify", query: { id } });
  ElMessage.warning("暂未开放");
};
</script>

<style lang="scss">
.Recording {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  min-height: 100vh;

  .el-table {
    margin-top: 20px;
    height: 55vh;
    overflow: scroll;
    .cell {
      font-size: 13px;
      font-weight: 500;
      color: black;
    }
    .el-link {
      font-size: 13px;
      margin: 0 10px;
    }
  }
}
</style>
